<template>
  <div class="detail" style="margin-bottom: 60px;">
    <!-- 酒店大图 -->
    <van-image width="100%" height="12.5rem" :src="images" />

    <!-- 功能按键 -->
    <div class="box">
      <div>
        <div class="revooke">
          <van-icon name="arrow-left" color="#fff" />
        </div>
        <div class="right">
          
          <div class="revooke">
            <van-icon name="share" color="#fff" />
          </div>
        </div>
      </div>
    </div>
    <!-- 酒店详情内容 -->
    <div class="content">
      <!-- 顶部标题模块 -->
      <div style="height: 15vw;">
        <div class="pic">
          <img src="@/assets/GGB.jpg" alt="" />
        </div>
        <span style="margin-left: 6.25rem; margin-top: 400px;">如家商旅(金标)-太原五一路山大二院店 </span>
      </div>
      <!-- 评分评论模块 -->
      <div class="rating">
        <div class="rating_left">
          <span style="font-size: 20px; color: gold;">5.0分</span>
          <span style="margin-left: .75rem; font-size: 14px;">1342条评论<van-icon name="arrow" /></span>
        </div>
        <div class="rating_right">
          <van-icon name="phone-o" size="1.5rem" />
          <p style="font-size: 14px;">电话</p>
        </div>
      </div>
      <!-- 分割线 -->
      <van-divider :style="{ borderColor: '#ccc', padding: '0 16px' }" />

      <!-- 详细地址模块 -->
      <div class="addr">
        <div>
          <p style="margin-bottom: .4375rem;">太原市杏花岭区北大街68号</p>
        </div>
        <div>
          <span style="color: red; margin-right: .3125rem;">地图</span><van-icon name="arrow" />
        </div>
      </div>
    </div>

    <!-- 选择日期 -->
    <div>
      <ul>
        <li>今天入住</li>
          &nbsp;
          <div style="font-size: 10px;">共三晚</div>
          <li>周三离店</li>
      </ul>
    </div>
    <!-- 房间详情 -->
    <van-card
      price="200.00￥"
      title="高级大床房"
      desc="20平方米"
      thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
    >
    
    <template #tags>
      <van-tag plain type="primary" @click="showPopup" >
        查看详情
      </van-tag>
      <van-popup
         position="bottom"
         closeable 
         v-model:show="show" 
         :style="{ height: '30%' }">
          <div>
            <ul style="display: block;">
              <li>房型：商务大床房</li>
              <li>房间设施：</li>
              <li>房间介绍：</li>
            </ul>
          </div>
        </van-popup>
    </template>
    <template #footer>
      <van-button size="mini">预订</van-button>
    </template>
    </van-card>

      
   
  </div>
</template>
  


<script setup lang="ts" >
import { ref } from "vue";



const active = ref(0);
const images = [require("@/assets/GGB.jpg")];
const date = ref('');
const show = ref(false);
const showPopup = () => {
      show.value = true;
};



</script>

<style lang="scss" scoped>
.detail {
  .box {
    position: relative;
    top: -50vw
      /* -200px -> -26.6667vw */
    ;
    padding: 0 10px;

    >div {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .right {
        display: flex;
      }
    }

    .revooke {
      width: 1.5625rem;
      height: 1.5625rem;
      border-radius: 50%;
      line-height: 1.5625rem;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
  ul{
      display: flex;
      li{
        margin-left: 2vw;
        font-size: 2.1333vw;
      }
    }
  .content {
    position: relative;
    top: -8vw;
    width: 100%;
    height: 150px;

    .pic {
      width: 20vw;
      /* 200px -> 26.6667vw */
      height: 20vw;
      position: absolute;
      top: -5vw;
      left: 4vw;

      img {
        width: 100%;
        display: block;
        height: 100%;
      }
    }

    .rating {
      padding: 0 0.625rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .rating_right {
        border-left: 1px solid #ccc;
        margin-right: 20px;
        padding-left: 20px;

      }
    }

    .addr {
      padding: 0 0.625rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

    }
  }
}
</style>
